import React from 'react';
import { Modal, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import SubHeaderComponent from '../../../components/subHeader';
import { authLogin } from '../../../assets/js/utils';
import config from '../../../assets/js/conf/config';
import * as Request from '../../../services/home/address';
import * as utils from '../../../assets/js/utils/index';
import Css from '../../../assets/css/home/address/index.css';

class AddressIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            addressList: []
        }
        authLogin(props); //会员登录认证
    }

    componentDidMount(){
        this.getAddress();
    }

    //获取收货地址列表
    getAddress(){
        const { uid } = this.props.user;
        Request.getAddress({ uid }).then(res => {
            if(res.code === 200){
                this.setState({ addressList: res.data });
            }
        });
    }

    //修改收货地址
    modAddress(e, aid){
        e.stopPropagation();
        this.goPage('address/modify?aid='+aid);
    }

    //删除收货地址
    delAddress(e, aid){
        e.stopPropagation();
        const { uid } = this.props.user;
        Modal.alert('', '确认要删除吗', [
            { text: '取消', onPress: () => {}, style: 'default' },
            { text: '确认', onPress: () => { 
                const aTempAddress = utils.deepClone(this.state.addressList);
                const restAddress = aTempAddress.filter(item => item.aid !== aid);
                this.setState({ addressList: restAddress });
                Request.delAddress({ uid, aid }).then(res => {
                    if(res.code === 200){
                        console.log(aid);
                        if(aid === localStorage['aid']){
                            localStorage.removeItem('aid');
                        }
                        if(aid === sessionStorage['aid']){
                            sessionStorage.removeItem('aid');
                        }
                        Toast.info('删除成功', 2);
                    }
                });
            } }
        ]);
    }

    //选择收货地址
    selectAddress(aid){
        sessionStorage['aid'] = aid;
        this.props.history.replace(config.path+'balance/index');
    }

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    componentWillUnmount(){
        this.setState = (state, callback) => {
            return ;
        }
    }

    render(){
        const { addressList } = this.state;
        return (
            <div className={Css['page']}>
                {/* 头部 */}
                <SubHeaderComponent title="选择收货地址" />
                {/* 内容主体 */}
                <div className={Css['main']}>
                    <div className={Css['address-nav']}>
                        <div className={Css['address-nav-name-1']}>配送地址</div>
                        <div className={Css['address-nav-name-2']} onClick={() => this.goPage('address/add')}>+添加收货地址</div>
                    </div>
                    {/* 地址列表 */}
                    {
                        addressList.length > 0 ? addressList.map(item => {
                            return (
                                <div key={item.aid} className={Css['address-list']} onClick={() => this.selectAddress(item.aid)}>
                                    <div className={Css['address-info-wrap']}>
                                        {
                                            item.isdefault === '1' ? <div className={Css['check-mark']}></div> : ''
                                        }
                                        <div className={item.isdefault === '1' ? Css['address-info']+' '+Css['default'] : Css['address-info'] }>
                                            <div className={Css['person']}><span>{item.name}</span><span>{item.cellphone}</span></div>
                                            <div className={Css['address']}>
                                                {
                                                    item.default === '1' ? <span className={Css['default']}>默认</span> : ''
                                                }
                                                <span className={Css['text']}>{item.city}{item.area}{item.address}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div className={Css['handle-wrap']}>
                                        <div className={Css['edit']} onClick={(e) => this.modAddress(e, item.aid)}></div>
                                        <div className={Css['del']} onClick={(e) => this.delAddress(e, item.aid)}></div>
                                    </div>
                                </div>  
                            )
                        }) : <div className='null-item'>请添加收货地址</div>
                    }
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(AddressIndex);